<template>
  <div class="lg:flex">
    <Avatar :src="userinfo.avatarUrl || headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">早安, {{ userinfo.userName }}, 开始您一天的工作吧！</h1>
      <!-- <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> -->
      <span class="text-secondary"> 今日是{{date}} </span>
      
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <!-- <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> 待办 </span>
        <span class="text-2xl">2/10</span>
      </div>

      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
        <span class="text-secondary"> 项目 </span>
        <span class="text-2xl">8</span>
      </div> -->
      <!-- <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
        <span class="text-secondary"> 团队 </span>
        <span class="text-2xl">300</span>
      </div> -->
      <!-- <div v-if="messages.length" style="width: 90%;max-height: 80px;line-height: 80px;">
        <div class="scroll-container">
          <div class="message-list" :style="{ 'animation-duration': duration + 's' }">
            <div v-for="(item, index) in messages" :key="index"  class="message">
              <div style="display: inline-block;" v-html="item.msgContent"></div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted,ref } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.jpg';
  import { getNewNotice } from '/@/api/msg/msgInner';
  import { formatToDateTime,dateUtil } from '/@/utils/dateUtil';

  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);
  const duration = 15; // 滚动一次的时长（秒）
  const messages = ref([])
  const date = ref('')

  onMounted(async () => {
  //  let res = await getNewNotice();
  //  messages.value = res.data
   let week = '星期' + ['一', '二', '三', '四', '五', '六', '日'][dateUtil().day() - 1];
   date.value = `${formatToDateTime(new Date(),'YYYY-MM-DD')}，${week}`
   
  });
</script>
<style scoped>
  .jeesite-page-wrapper .jeesite-page-wrapper-content {
    padding: 0;
    border-radius: 5px;
}
  .jeesite-page-wrapper-content-bg {
      background-color: #f0f2f5;
  }
  .scroll-container {
    /* position: fixed;
    width: 100%;
    bottom: 0; */
  overflow: hidden;
  /* position: relative; */
  white-space: nowrap;
}
 
.message-list {
  /* position: absolute; */
  /* top: 0;
  left: 0; */
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s; /* 延迟开始滚动 */
}
 
.message {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}
 
@keyframes scroll {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>
